<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <title>index</title>
    <script src="js/vue.js"></script>
    <!--<script type="module" src="js/exporjs.js?_ijt=109h9409lg1976rq4k1vk5a3oo"></script>-->
    <!--<script type="module">-->
    <!--import {sex,echo} from "./js/exportjs.js";-->
    <!--</script>-->
    <script src="js/index.js"></script>
</head>

<body>
<div id="app">
    {{ message }}
    <div>
        <p v-if="seen">message</p>
    </div>
    <button @click="sum(1,2)">aaa</button>
    <table border="1">
        <thead>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
        </thead>
        <tbody>
        <tr class="classtr" v-bind:id="todo.sex" v-for="todo in todos">
            <td>{{ todo.name }}</td>
            <td>{{ todo.age }}</td>
            <td>{{ todo.sex }}</td>
        </tr>
        </tbody>
    </table>
    <vueTr v-bind:items="todos"></vueTr>
    <table id="table3" border="1">
        <thead>
        <th>name</th>
        <th>age</th>
        <th>sex</th>
        </thead>
        <tbody >
        <tr v-for="(tableItem,index) in tableItems" v-html="tableItem"></tr>
        <tr><td><button @click="refreshTr()">refresh</button></td><td><button @click="addTr()">addTr</button></td><td></td></tr>
        </tbody>
    </table>
    <button onclick="getVueData()">getVueData</button>

    <button onclick="getTodosData()">getTodosData</button>
    <button onclick="showTodosData()">showTodosData</button>

    <br/>
    vue方式修改数组元素影响table列表:<input  idx="2" @input="changeTodosData($event)" type="text"/>
    <br/>
    dom方式修改数组袁术影响table列表:<input  idx="1" oninput="changeTodoDataDom(this)" type="text"/>
    <br/>
    dom方式修改数组袁术影响table列表方式2:<input  idx="0" oninput="changeTodoDataDom0(this.attributes.idx,this.value)" type="text"/>
    <br/>
    执行getVueData之后，列表新增一条元素，键入input值影响table列表：
    <input  idx="3" @input="changeTodosData($event)" type="text"/>

    删除一条table行:<input ref="delItem" type="number"/> <button @click="delTableItem()">删除一条table行</button>

</body>
</html>